html {
  background-color: #e2e2e2;
  margin: 0;
  padding: 0;
}
body {
  background-color: #fff;
  border-top: solid 10px #000;
  color: #333;
  font-size: .85em;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
  margin: 0;
  padding: 0;
}
a:link,
a:visited,
a:active,
a:hover {
  color: #333;
  outline: none;
  padding-left: 3px;
  padding-right: 3px;
  text-decoration: none;
}
a:hover {
  background-color: #c7d1d6;
}
header,
footer,
hgroup,
nav,
section {
  display: block;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.highlight {
  background-color: #93e140;
  padding-left: 5px;
  padding-right: 5px;
}
.clear-fix:after {
  content: ".";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #000;
  margin-bottom: 0;
  padding-bottom: 0;
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.75em;
}
h3 {
  font-size: 1.2em;
}
h4 {
  font-size: 1.1em;
}
h5,
h6 {
  font-size: 1em;
}
/* main layout
----------------------------------------------------------*/
.content-wrapper {
  margin: 0 auto;
  max-width: 960px;
}
#body {
  background-color: #efeeef;
  clear: both;
  padding-bottom: 35px;
}
.main-content {
  background: url("../images/accent.png") no-repeat;
  padding-left: 10px;
  padding-top: 30px;
  margin: 0 auto;
  max-width: 960px;
}
.main-content:after {
  content: ".";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}
.featured + .main-content {
  background: url("../images/heroAccent.png") no-repeat;
}
footer {
  clear: both;
  background-color: #e2e2e2;
  font-size: .8em;
  height: 100px;
}
/* site title
----------------------------------------------------------*/
.site-title {
  color: #c8c8c8;
  font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
  font-size: 2.3em;
  margin: 20px 0;
}
.site-title a,
.site-title a:hover,
.site-title a:active {
  background: none;
  color: #c8c8c8;
  outline: none;
  text-decoration: none;
}
/* login
----------------------------------------------------------*/
#login {
  display: block;
  font-size: .85em;
  margin: 20px 0 12px;
  text-align: right;
}
#login a {
  background-color: #d3dce0;
  margin-left: 10px;
  margin-right: 3px;
  padding: 2px 3px;
  text-decoration: none;
}
#login a.username {
  background: none;
  margin-left: 0px;
  text-decoration: underline;
}
#login ul {
  margin: 0;
}
#login li {
  display: inline;
  list-style: none;
}
/* menu
----------------------------------------------------------*/
ul#menu {
  font-size: 1.3em;
  font-weight: 600;
  margin: 0;
  text-align: right;
}
ul#menu li {
  display: inline;
  list-style: none;
  padding-left: 15px;
}
ul#menu li a {
  background: none;
  color: #999;
  text-decoration: none;
}
ul#menu li a:hover {
  color: #333;
  text-decoration: none;
}
/* page elements
----------------------------------------------------------*/
/* featured */
.featured {
  background-color: #fff;
}
.featured .content-wrapper {
  background-color: #5f9ea0;
  background-image: -ms-linear-gradient(left, #5f9ea0 0%, #7fb1b3 100%);
  background-image: -o-linear-gradient(left, #5f9ea0 0%, #7fb1b3 100%);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #5f9ea0), color-stop(1, #7fb1b3));
  background-image: -webkit-linear-gradient(left, #5f9ea0 0%, #7fb1b3 100%);
  background-image: linear-gradient(left, #5f9ea0 0%, #7fb1b3 100%);
  color: #3e5667;
  padding: 20px 40px 30px 40px;
}
.featured hgroup.title h1,
.featured hgroup.title h2 {
  color: #fff;
}
.featured p {
  font-size: 1.1em;
}
/* page titles */
hgroup.title {
  margin-bottom: 10px;
}
hgroup.title h1,
hgroup.title h2 {
  display: inline;
}
hgroup.title h2 {
  font-weight: normal;
  margin-left: 3px;
}
/* features */
section.feature {
  width: 300px;
  float: left;
  padding: 10px;
}
/* ordered list */
ol.round {
  list-style-type: none;
  padding-left: 0;
}
ol.round li {
  margin: 25px 0;
  padding-left: 45px;
}
ol.round li.one {
  background: url("../images/orderedListOne.png") no-repeat;
}
ol.round li.two {
  background: url("../images/orderedListTwo.png") no-repeat;
}
ol.round li.three {
  background: url("../images/orderedListThree.png") no-repeat;
}
/* content */
article {
  float: left;
  width: 70%;
}
aside {
  float: right;
  width: 25%;
}
aside ul {
  list-style: none;
  padding: 0;
}
aside ul li {
  background: url("../images/bullet.png") no-repeat 0 50%;
  padding: 2px 0 2px 20px;
}
.label {
  font-weight: 700;
}
/* login page */
#loginForm {
  border-right: solid 2px #c8c8c8;
  float: left;
  width: 45%;
}
#loginForm .validation-error {
  display: block;
  margin-left: 15px;
}
#socialLoginForm {
  margin-left: 40px;
  float: left;
  width: 50%;
}
/* contact */
.contact h3 {
  font-size: 1.2em;
}
.contact p {
  margin: 5px 0 0 10px;
}
.contact iframe {
  border: 1px solid #333;
  margin: 5px 0 0 10px;
}
/* forms */
fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
fieldset legend {
  display: none;
}
fieldset ol {
  padding: 0;
  list-style: none;
}
fieldset ol li {
  padding-bottom: 5px;
}
fieldset label {
  display: block;
  font-size: 1.2em;
  font-weight: 600;
}
fieldset label.checkbox {
  display: inline;
}
fieldset input[type="text"],
fieldset input[type="password"] {
  border: 1px solid #e2e2e2;
  color: #333;
  font-size: 1.2em;
  margin: 5px 0 6px 0;
  padding: 5px;
  width: 300px;
}
fieldset input[type="text"]:focus,
fieldset input[type="password"]:focus {
  border: 1px solid #5f9ea0;
}
fieldset input[type="submit"] {
  background-color: #d3dce0;
  border: 1px solid #787878;
  cursor: pointer;
  font-size: 1.2em;
  font-weight: 600;
  padding: 7px;
}
/* ajax login/registration dialog */
.modal-popup {
  font-size: 0.7em;
}
.modal-popup input[type="text"],
.modal-popup input[type="password"] {
  width: 90%;
}
/* info and errors */
.message-info {
  border: 1px solid;
  clear: both;
  padding: 10px 20px;
}
.message-error {
  clear: both;
  color: #e80c4d;
  font-size: 1.1em;
  font-weight: bold;
  margin: 20px 0 10px 0;
}
.message-success {
  color: #7ac0da;
  font-size: 1.3em;
  font-weight: bold;
  margin: 20px 0 10px 0;
}
.error {
  color: #e80c4d;
}
/* styles for validation helpers */
.field-validation-error {
  color: #e80c4d;
  font-weight: bold;
}
.field-validation-valid {
  display: none;
}
input[type="text"].input-validation-error,
input[type="password"].input-validation-error {
  border: 1px solid #e80c4d;
}
.validation-summary-errors {
  color: #e80c4d;
  font-weight: bold;
  font-size: 1.1em;
}
.validation-summary-valid {
  display: none;
}
ul#social li {
  display: inline;
  list-style: none;
}
ul#social li a {
  color: #999;
  text-decoration: none;
}
a.facebook,
a.twitter {
  display: block;
  float: left;
  height: 24px;
  padding-left: 17px;
  text-indent: -9999px;
  width: 16px;
}
a.facebook {
  background: url("../images/facebook.png") no-repeat;
}
a.twitter {
  background: url("../images/twitter.png") no-repeat;
}
/********************
*   Mobile Styles   *
********************/
@media only screen and (max-width: 850px) {
  /* header
    ----------------------------------------------------------*/
  header .float-left,
  header .float-right {
    float: none;
  }
  /* logo */
  header .site-title {
    margin: 10px;
    text-align: center;
  }
  /* login */
  #login {
    font-size: .85em;
    margin: 0 0 12px;
    text-align: center;
  }
  #login ul {
    margin: 5px 0;
    padding: 0;
  }
  #login li {
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #login a {
    background: none;
    color: #999;
    font-weight: 600;
    margin: 2px;
    padding: 0;
  }
  #login a:hover {
    color: #333;
  }
  /* menu */
  nav {
    margin-bottom: 5px;
  }
  ul#menu {
    margin: 0;
    padding: 0;
    text-align: center;
  }
  ul#menu li {
    margin: 0;
    padding: 0;
  }
  /* main layout
    ----------------------------------------------------------*/
  .main-content,
  .featured + .main-content {
    background-position: 10px 0;
  }
  .content-wrapper {
    padding-right: 10px;
    padding-left: 10px;
  }
  .featured .content-wrapper {
    padding: 10px;
  }
  /* page content */
  article,
  aside {
    float: none;
    width: 100%;
  }
  /* ordered list */
  ol.round {
    list-style-type: none;
    padding-left: 0;
  }
  ol.round li {
    padding-left: 10px;
    margin: 25px 0;
  }
  ol.round li.one,
  ol.round li.two,
  ol.round li.three {
    background: none;
  }
  /* features */
  section.feature {
    float: none;
    padding: 10px;
    width: auto;
  }
  section.feature img {
    color: #999;
    content: attr(alt);
    font-size: 1.5em;
    font-weight: 600;
  }
  /* forms */
  fieldset input[type="text"],
  fieldset input[type="password"] {
    width: 90%;
  }
  /* login page */
  #loginForm {
    border-right: none;
    float: none;
    width: auto;
  }
  #loginForm .validation-error {
    display: block;
    margin-left: 15px;
  }
  #socialLoginForm {
    margin-left: 0;
    float: none;
    width: auto;
  }
  /* footer
    ----------------------------------------------------------*/
  footer {
    text-align: center;
    height: auto;
    padding: 10px 0;
  }
  footer p {
    margin: 0;
  }
  footer ul#social {
    padding: 0;
    margin: 0;
  }
  footer a.facebook,
  footer a.twitter {
    background: none;
    display: inline;
    float: none;
    height: auto;
    padding-left: 0;
    text-indent: 0;
    width: auto;
  }
}
